<template>
    <div>
        <template>
        <el-form :inline="true" :model="companyCertDoneForm">
            <el-row>
                <el-col :span="22">
                    <el-form-item label="申请人">
                        <el-input v-model="companyCertDoneForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="companyCertDoneForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="审核人">
                        <el-select v-model="companyCertDoneForm.auditorId" placeholder="请选择">
                            <el-option v-for="(value,key) in optionsAuditor" :key="key" :label="value" :value="key">
                            </el-option>
                        </el-select>
                        <!-- <el-input v-model="companyCertDoneForm.auditorId"></el-input> -->
                    </el-form-item>
                    <el-form-item label="审核状态">
                        <el-select v-model="companyCertDoneForm.auditStatus" placeholder="请选择">
                            <el-option v-for="(value,key) in options" :key="key" :label="value" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="审核时间">
                        <el-date-picker v-model="companyCertDoneForm.auditTimeStart" type="date"  placeholder="选择日期">
                        </el-date-picker>
                        <el-date-picker v-model="companyCertDoneForm.auditTimeEnd" type="date"  placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="2" class="text-right">
                    <el-form-item>
                        <el-button type="primary" @click="fetchCertCompanyNotAudited(companyCertDoneForm)">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table v-loading.body="loading" :data="companyUserList" border height="364" row-class-name="text-center">
            <el-table-column show-overflow-tooltip prop="name" label="企业名称">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="nickname" label="申请人">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="mobile" label="联系电话">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="applyTime" label="申请时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditorName" label="审核人">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditTime" label="审核时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="option" label="操作">
                <template scope="scope">
                    <span  class="color02 pointer" @click='openCompanyCertDetailDialog(scope.$index, companyUserList)'>
                        <span>
                            详情
                        </span>
                    </span>
                    <span  class="color02 pointer" @click='openCompanyCertHistoryDialog(scope.$index, companyUserList)'>
                        <span>
                            审核记录
                        </span>
                    </span>

                </template>
            </el-table-column>
        </el-table>
    </template>
    <template>
        <div class="pagination-wrapper clearfix" v-if="companyUserListPagination.totalPage>1">
            <div class="fr mt-15">
                <span class="page-num mr-25 font-14">
            总数：<span v-text="companyUserListPagination.totalCount"></span> 每页显示
                <span v-text="companyUserListPagination.pageSize"></span>条 共
                <span v-text="companyUserListPagination.totalPage"></span>页
                </span>
                <el-pagination @current-change="companyUserListChange" :current-page="companyUserListPagination.currentPage" :page-size="companyUserListPagination.pageSize" layout="prev, pager, next"
                    :total="companyUserListPagination.totalCount" class="fr">
                </el-pagination>
            </div>
        </div>
    </template>
    <!-- 企业认证详情 -->
    <template>
        <el-dialog title="企业认证详情" size="large" :visible.sync="certCompanyDetailDialogStatus">
            <el-row v-loading.body="loadingCertDetail">
                <el-col :span="10">
                    <img :src="companyCertDetail.businessLicenceImgPath" alt="">
                </el-col>
                <el-col :span="12">
                    <h3 class="mt-25">企业认证信息</h3>
                    <hr>
                    <div class="mt-15"> 企业名称：<span v-text="activeDialogData.name"></span></div>
                    <div class="mt-15"> 所在地：<span v-text=""></span></div>
                    <div class="mt-15"> 统一社会信用码：<span v-text="companyCertDetail.businessLicenceNum"></span></div>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="certCompanyDetailDialogStatus = false">关闭</el-button>
            </div>
        </el-dialog>
    </template>
    <!--   审核记录  -->
    <template>
        <el-dialog title="审核记录" size="large" :visible.sync="certCompanyHistoryDialogStatus">
          <el-table v-loading.body="loadingAuditHistoryList" :data="auditHistoryList" border row-class-name="text-center">
            <el-table-column show-overflow-tooltip prop="auditorName" label="审核人">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditTime" label="审核时间">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="auditStatus" label="审核结果">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="reasonType" label="原因分类">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="reason" label="通知内容">
            </el-table-column>
        </el-table>
         <div slot="footer" class="dialog-footer">
                <el-button @click="certCompanyHistoryDialogStatus = false">关闭</el-button>
            </div>
        </el-dialog>
    </template>
    </div>
</template>
<script>
    import {
        getCertCompanyHasAudited,
        postCertCompany,
        getCompanyCertDetail,
        getCompanyReasonList,
        getUserAcountAuditHistory
    } from '@/api/user.js'
    export default {
        data () {
            return {
                loading: false,
                loadingCertDetail: false,
                loadingAuditHistoryList: false,
                options: {
                    '': '',
                    2: '通过',
                    3: '未通过'
                },
                optionsAuditor: {
                    '': ''
                },
                // 列表导航分页
                companyUserListPagination: {
                    currentPage: 1,
                    pageSize: 10,
                    totalCount: 120,
                    totalPage: 12
                },
                // 列表搜索表单
                companyCertDoneForm: {
                    nickname: '',
                    name: '',
                    auditorId: '',
                    auditStatus: '',
                    auditTime: '',
                    auditTimeStart: '',
                    auditTimeEnd: ''
                },
                // 列表信息
                companyUserList: [],
                // 认证详情
                companyCertDetail: {},
                // 认证历史列表
                auditHistoryList: [],
                // 弹出框数据
                activeDialogData: {},
                // 认证信息弹出框
                certCompanyDetailDialogStatus: false,
                // 审核记录弹出框
                certCompanyHistoryDialogStatus: false,
                companyCertDone: {}
            }
        },
        methods: {
            // 获取代办列表数据
            fetchCertCompanyNotAudited (data) {
                this.loading = true
                getCertCompanyHasAudited(data).then((response) => {
                    this.loading = false
                    if (response.data.code === 0) {
                        let list = this.companyUserList = response.data.data.data
                        this.companyUserListPagination = response.data.data
                        for (let item in list) {
                            this.optionsAuditor[item.auditorId] = item.auditorName || item.auditorId
                        }
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loading = false
                    console.log(err)
                })
            },
            // 翻页
            companyUserListChange (page) {
                let param = this.companyCertDoneForm
                param.currentPage = page
                param.pageSize = this.companyUserListPagination.pageSize
                this.fetchCertCompanyNotAudited(param)
            },
            // 打开审核详情对话框
            openCompanyCertDetailDialog (index, data) {
                this.activeDialog(index, data, true)
                this.certCompanyDetailDialogStatus = true
                this.fetchCertDetail(this.activeDialogData.id)
            },
            // 获取审核详情
            fetchCertDetail (id) {
                this.loadingCertDetail = true
                getCompanyCertDetail({id}).then((response) => {
                    this.loadingCertDetail = false
                    if (response.data.code === 0) {
                        this.companyCertDetail = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loadingCertDetail = false
                    console.log(err)
                })
            },
            // 打开审核历史对话框
            openCompanyCertHistoryDialog (index, data) {
                this.activeDialog(index, data, true)
                this.certCompanyHistoryDialogStatus = true
                this.fetchUserAcountAuditHistory(this.activeDialogData.id)
            },
            // 获取认证历史
            fetchUserAcountAuditHistory (id) {
                this.loadingAuditHistoryList = true
                getUserAcountAuditHistory({id, type: 2}).then((response) => {
                    this.loadingAuditHistoryList = false
                    if (response.data.code === 0) {
                        this.auditHistoryList = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    this.loadingAuditHistoryList = false
                    console.log(err)
                })
            },
            // 对话框弹出，填写弹出框的显示数据
            activeDialog (index, data, isActive = false) {
                if (isActive) {
                    this.activeDialogData = data[index]
                } else {
                    this.activeDialogData = {}
                }
            },
            // 关闭对话框
            closeDialog (formName) {
                this.resetForm(formName)
            },
            // 重置表单
            resetForm (formName) {
                this.$refs[formName].resetFields()
            },
            // 个人认证提交审核信息
            certCompanySubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = this.certCompanyForm
                        postCertCompany(data).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('修改成功')
                                this.certCompanyDetailDialogStatus = false
                            } else if (response.data.code === 1) {
                                this.$message('修改失败')
                            }
                        }).catch(function (err) {
                            console.log(err)
                        })
                    }
                })
            },
            // 获取原因列表
            fetchCompanyReasonList: function () {
                getCompanyReasonList().then((response) => {
                    if (response.data.code === 0) {
                        this.reasonList = response.data.data
                    } else if (response.data.code === 1) {
                        this.$message('获取失败')
                    }
                }).catch(function (err) {
                    console.log(err)
                })
            }
        },
        created () {
            this.fetchCertCompanyNotAudited()
        }

    }

</script>
<style scoped>
    .more-menu {
        height: 24px;
        width: 100%;
        background: url('../../../assets/more-menu.png') no-repeat center;
    }

</style>
